<html><head>
<link href="utility.css" rel="stylesheet" type="text/css"/>
<!-- script src="fetchers.js"></script -->
<script src="db.js"></script>
<script>
// currently selected/displayed node
var current_selection = null;
var current_node = null;
var port = null;

function treeToggle(ev, url) {
    var el = ev.target;
    var sub = document.getElementById("sub");
    if (sub) {
        var last = sub.previousElementSibling;
        sub.parentNode.removeChild(sub);
        last.className = "treenode closed";
        if (last==el) {
            return ;
        }
    }
    if (-1!=el.className.indexOf("opened")) {
        el.className = "treenode closed";
        return ;
    }

    el.className = "treenode opened";
    sub = document.createElement("div");
    sub.id = "sub";
    if (el.nextElementSibling) {
        el.parentNode.insertBefore(sub, el.nextElementSibling);
    } else {
        el.parentNode.appendChild(sub);
    }
    treeKidClicked(el, url);
    // now, fill sub with kids...
    SeoprofesionalDb.get_sub(url, function(kids) {
        for (var i = 0;i<kids.length;i++) {
          appendTreeLeaf(sub, kids[i], url);
        }
    });
}
function appendTreeLeaf(node, kid, url) {
  var el = document.createElement("div");
  el.id = "s" + kid;
  var text = kid;
  if (kid!=url) {
      text = "..." + text.substring(url.length);
  }
  el.innerText = text;
  el.addEventListener("click", function() {treeKidClicked(event.target, kid);}, false);
  node.appendChild(el);
}
function treeKidClicked(el, url) {
    current_selection = url;
    current_node = el;

    document.getElementById("plot").src = "popup.html?chartlinks=1&url=" + escape(url);
    document.getElementById("plothead").href = url;
    document.getElementById("plothead").innerText = url;
    var el = document.getElementById("commands");
    var s = "";
    document.getElementById("commands").style.display = "inline";
}
function fill() {
  var tree = document.getElementById("tree");
  SeoprofesionalDb.get_whitelist(function(url) {
    var el;
    el = document.createElement("div");
    el.innerText = url;
    el.id = url;
    el.className = "treenode closed";
    el.addEventListener("click", function() {treeToggle(event, url);}, false);
    tree.appendChild(el);
  });
}
function remove() {
  SeoprofesionalDb.forget_record(current_selection, function() {
    var el = current_node;
    if (-1==el.className.indexOf("treenode")) {
      el = el.parentNode.previousElementSibling;
    }
    treeToggle({"target": el}, el.id);
    treeToggle({"target": el}, el.id);
  });
}
function reload() {
  if (null==port) {
    port = chrome.extension.connect({name: "seoputility"});
    port.onMessage.addListener(function(msg) {
      if ("refresh"==msg.type) {
        if (current_selection==msg.url) {
          treeKidClicked(current_node, current_selection);
        } else {
          var el = document.getElementById("s" + msg.url);
          if (el) {
            el.className+= " blink ";
            setTimeout(function() {el.className = el.className.replace(" blink ", ""); }, 100);
          }
        }
      }
    });
  }
  if (-1==current_node.className.indexOf("treenode")) {
    port.postMessage({type:"reloadurl", url:current_selection});
  } else {
    port.postMessage({type:"reloaddomain", url:current_selection});
  }
}

function init() {
  document.getElementById("reload").title = chrome.i18n.getMessage("reload_icon_title");
  document.getElementById("remove").title = chrome.i18n.getMessage("remove_icon_title");
  fill();
}
</script>
</head><body onload="init()">
<div id="head">
  <span id="commands">
    <img id="reload" src="reload.png" onclick="reload()">
    <img id="remove" src="remove.png" onclick="remove()">
  </span>
  <a id="plothead"></a>
</div>
<div style="top: 40px; position: relative;">
  <div id="tree"></div>
  <div id="content">
    <iframe id="plot"></iframe>
  </div>
</div>
</body></html>

